import React, { Component } from 'react';
//导入 momentjs
import moment from 'moment';
//格式化事件
// console.log(moment().format('YYYY-MM-DD HH:mm:ss'));

export default class Clock extends Component {
  // 1. 声明状态
  state = {
    timeStr: moment().format('YYYY-MM-DD HH:mm:ss')
  }

  //渲染方法
  render() {
    return (
      <div style={{width: 200, padding: 20, border: 'solid 1px #abc'}}>
        {/* 2. 使用状态值控制 div 的文本 */}
        {this.state.timeStr}
      </div>
    )
  }

  //组件挂载完毕  只执行一次
  componentDidMount(){
    //启动定时器
    this.timer = setInterval(() => {
      console.log('run')
      //获取当前时间的格式化字符串
      let str = moment().format('YYYY-MM-DD HH:mm:ss');
      //更新状态
      this.setState({
        timeStr: str
      })
    }, 1000);
    //为全局 window 绑定事件  on  有when的意思  context 上下文  menu 菜单
    window.oncontextmenu = function(e){
      //阻止默认行为
      e.preventDefault();
    }
  }

  //组件卸载  收尾工作
  componentWillUnmount(){
    //停止定时器
    clearInterval(this.timer);
    //取消事件
    window.oncontextmenu = null;
  }
}
